import React, { Component } from 'react';
import { StyleSheet, NativeModules, TouchableOpacity, Image } from 'react-native';
import { Container, Content, Icon, Button, Text, View } from 'native-base';
import { ListItem } from 'react-native-elements'
import { connect } from 'react-redux';

import { Colors, Metrics } from '../../theme';
import Http from '../../utils/HttpPost';

class PublishList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      
    }
  }

  UNSAFE_componentWillMount() {

  }

  componentDidMount() {

  }

  selectPublishTypeFunc(types,uri){
    this.props.setPublishInfo({publishType: types});
    this.props.navigation.navigate(uri);
  }


  render() {
    return (
      <Container>
        <Content >
          <Text style={Styles.myTitles}>简单需求</Text>
          <View style={Styles.flexContents}>

            <TouchableOpacity style={Styles.boxContents} onPress={()=>{ this.selectPublishTypeFunc('1') }}>
              <Icon type="FontAwesome" name='download' style={Styles.boxIcons} />
              <Text >投票砍价</Text>
            </TouchableOpacity>
            <TouchableOpacity style={Styles.boxContents} onPress={()=>{ this.selectPublishTypeFunc('2') }}>
              <Icon type="FontAwesome" name='certificate' style={Styles.boxIcons} />
              <Text >纯关注</Text>
            </TouchableOpacity>
            <TouchableOpacity style={Styles.boxContents} onPress={()=>{ this.selectPublishTypeFunc('3','ZhuanfaFx') }}>
              <Icon type="FontAwesome" name='share-square' style={Styles.boxIcons} />
              <Text >纯转发</Text>
            </TouchableOpacity>

          </View>

          <Text style={Styles.myTitles}>下载APP</Text>
          <View style={Styles.flexContents}>

            <TouchableOpacity style={Styles.boxContents} onPress={()=>{ this.selectPublishTypeFunc('4','XiazaiZc') }}>
              <Icon type="FontAwesome" name='registered' style={Styles.boxIcons} />
              <Text >下载+注册</Text>
            </TouchableOpacity>
            <TouchableOpacity style={Styles.boxContents} onPress={()=>{ this.selectPublishTypeFunc('5') }}>
              <Icon type="FontAwesome" name='address-card' style={Styles.boxIcons} />
              <Text >注册+实名</Text>
            </TouchableOpacity>
            <TouchableOpacity style={Styles.boxContents} onPress={()=>{ this.selectPublishTypeFunc('6') }}>
              <Icon type="FontAwesome" name='credit-card-alt' style={Styles.boxIcons} />
              <Text >实名+绑卡</Text>
            </TouchableOpacity>

          </View>
          <Text style={Styles.myTitles}>{this.props.publishType}</Text>


        </Content>
      </Container>
    );
  }

}

const mapStateToProps = state => ({
  logged: state.user.logged,
  token: state.user.token,
  publishType: state.publish.publishType
});

const mapDispatchToProps = dispatch => ({
  setPublishInfo: publishInfo => dispatch({ type: 'SET_PUBLISHINFO', payload: { publishInfo } }),
});

export default connect(mapStateToProps, mapDispatchToProps)(PublishList);

const Styles = StyleSheet.create({
  flexContents: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  myTitles:{
    textAlign: 'center',
    color: Colors.subject,
    marginTop: 28,
    marginBottom: 8
  },
  boxContents: {
    width: Metrics.screenWidth / 3,
    justifyContent: 'center',
    alignItems: 'center'
  },
  boxIcons: {
    color: Colors.subject,
    padding: 8
  }
});